/**
* 功能描述：基础日期选择器样式文件
* @author jin xiaohang
* @date 2022/9/20 9:48
*/

@import "src/style/mixins/index";

//日期选择器样式
@include b(base-date-picker){
  //基本高度
  $--datepicker-base-height:50%;

  //基本宽度
  $--datepicker-base-width:280px;

  //样式相关
  //background-color: $--color-primary;
  //border-style: $--border-style-base;
  //border-radius: $--border-radius-zero;

  //字体大小
  font-size: $font-size-extra-large;

  //布局相关
  height: $--datepicker-base-height;
  width: $--datepicker-base-width;
  position: relative;
  padding: 5px;
  margin: 10px;

    //输入框样式
    @include b(base-date-input){
      width: 100%;
      padding: 2px;
      min-width: 1px;
      min-height: 1px;
      &:disabled{
        cursor: not-allowed;
        background-color: #909399;
      }
    }

  //待选面板样式
    @include b(base-date-picker-panel){
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 300px;
        height: 280px;
        position: absolute;
        top: 45px;
        bottom: 0;
        z-index: 1050;
        box-shadow: 0 2px 8px #00000026;
        background: #cbe6ff;

      //面板单元格样式
        @include b(base-date-picker-cell){

          //激活聚焦
          &:focus &:active{
            background-color: $--datepicker-active-color
          }

          //鼠标悬停
          &:hover{
            background-color: $--datepicker-inrange-hover-background-color;
          }
            background-color:#DCDFE6;
            height: 20px;
            width: 100px;
            font-size: 12px;
            color: black;
            cursor: pointer;
        }
    }

}